<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h1>向下滚动</h1>
  <p>请向下滚动以查看粘性效果。</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<h2>粘性导航栏实例</h2>
    <p>如果导航栏到了滚动位置，它会<strong>粘</strong>到顶部。</p>
    <p><b>注释：</b>Internet Explorer 不支持粘性定位并且 Safari 需要 -webkit- 前缀。</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo
    maluisset concludaturque et eum, altera fabulas ut quo.
   Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
    Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. 
    Lorem ipsum dolor sit amet, illum definitiones no quo,
    maluisset concludaturque et eum, altera fabulas ut quo.
    Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
    Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
    Eum no molestiae voluptatibus.</p>
</body>
</html>